<template>
	<view>
		<!-- <uv-navbar title="货源详情" :autoBack="true" :placeholder="true" bg-color="/static/img/bg_1.png" imgMode="aspectFill"></uv-navbar> -->
		<view class="topSty">
			<div style="height:50rpx;"></div>
			<div class="header">
				<div class="back center" @click="back">
					<image src="/static/icon/back.png" mode="widthFix" class="w-20"></image>
				</div>
				{{$t('货代报价')}}
			</div>
			<view class="h-50 mb-30">
				<!-- <route v-if="allInfo.demand.split(',').includes('1')" :allInfo="allInfo" /> -->
			</view>
		</view>

		<!-- <view class="wlxx">
			<view class="item_title">
				<view class="fz24 text-555 mt-10">
					{{$t('发布时间')}}：2024-12-21 10:35
				</view>
				<view class="fz24 text-333 mt-10 font-bold mr-5">
					{{ allInfo.goods_type == 0 ? $t('大件') : $t('小件') }}
				</view>
			</view>
			<view class="item">
				<view class="name">
					{{$t('货物信息')}}
				</view>
				<view class="info">
					{{ [get(allInfo, "goods_info.title"), get(allInfo, "goods_info.goods_weight") + "吨", get(allInfo,
						"goods_info.goods_volume") + '立方米', get(allInfo, "goods_info.package.title")].filter(item =>
							item).join('/') || '' }}
				</view>
			</view>
			<view class="item">
				<view class="name">
					{{$t('业务需求')}}
				</view>
				<view class="info">
					<BusiRequire v-if="allInfo.goods_type == 0" :requireInfo="allInfo.demand" />
					<BusiRequire v-else requireInfo="1,2,3,4,5,6" />
				</view>
			</view>
			<view class="item">
				<view class="name">
					{{$t('运输方式')}}
				</view>
				<view class="info">
					{{ transportList.filter(item => item.key == allInfo.transport_way)[0].value || '' }} -
					{{ allInfo.transport_type == 1 ? $t('整车') : $t('散货') }}
					<text v-if="get(allInfo, 'vehicle_info.title')">
						-
						{{ get(allInfo, 'vehicle_info.title') || '' }}
					</text>

				</view>
			</view>
			<view class="item">
				<view class="name">
					{{$t('货主出价')}}
				</view>
				<view class="info red">
					{{ allInfo.price_unit }}{{ allInfo.price || '' }}
				</view>
			</view>

			<view class="item_btn">
				<view class="btn">
					<image class="ico" src="/static/icon/share.png" mode="widthFix"></image>
					<text>{{ get(allInfo, "attach.exposure_number") || 0 }}</text>
				</view>
				<view class="btn">
					<image class="ico" src="/static/icon/eye.png" mode="widthFix"></image>
					<text>{{ get(allInfo, "attach.lookat_number") || 0 }}</text>
				</view>
				<view class="btn">
					<image class="ico" src="/static/icon/leaveWord.png" mode="widthFix"></image>
					<text>{{ get(allInfo, "attach.comment_number") || 0 }}</text>
				</view>
				<view class="btn_blue_big" @click="goDemand">
					{{$t('发货详情')}}
				</view>
			</view>
		</view> -->

		<view class="price_tab">
			<view class="item" :class="priceIndex == 0 ? 'hover' : ''" @click="clickPriceTab(0)">
				<view class="name">
					{{$t('综合')}}
				</view>
			</view>
			<view class="item" :class="priceIndex == 1 ? 'hover' : ''" @click="clickPriceioTab(1)">
				<view class="name">
					{{$t('报价')}}
				</view>
				<view class="arrow">
					<view >
						<u-icon name="arrow-up-fill" :color="priceSort === 1 ? '#278AFF' : '#C8C8C8'" size="10"></u-icon>
					</view>
					<view >
						<u-icon name="arrow-down-fill" :color="priceSort === 2 ? '#278AFF' : '#C8C8C8'" size="10"></u-icon>
					</view>
				</view>
			</view>
			<view class="item" :class="priceIndex == 2 ? 'hover' : ''"  @click="clickPriceioTabTime(2)">
				<view class="name">
					{{$t('时效')}}
				</view>
				<view class="arrow">
					<view >
						<u-icon name="arrow-up-fill" :color="timeSort === 1 ? '#278AFF' : '#C8C8C8'" size="10"></u-icon>
					</view>
					<view >
						<u-icon name="arrow-down-fill" :color="timeSort === 2 ? '#278AFF' : '#C8C8C8'" size="10"></u-icon>
					</view>
				</view>
			</view>
		</view>


		<view class="contentSty">
			<!-- <FreightVehicles v-show="allInfo.demand.split(',').length == 1 && allInfo.demand.split(',').includes('1')" v-for="item in carList" :carInfo="item"  @click="toQuoDetail" /> -->
			<!-- :class="{
					price_list: item.vipStatus == true || item.vipStatus == false,
					hover: item.vipStatus == true
				}" -->
			<view v-for="(item, index) in allPriceList" class="price_list"
				:class="{ hover: get(item, 'user.level') !== 0 }" :key="item.id">
				<view @click="toQuoDetail(item)">

					<view class="title">
						<!-- <image class="ico" src="/static/img/ico_logo1.png" mode="widthFix"></image> -->
						<image class="ico w-50 h-50 flex-shrink-0 " :src="getImageUrl(get(item, 'user.avatar'))"
							mode="aspectFill">
						</image>
						<view class="name">
							{{ get(item, "user.username") || '' }}
						</view>
					</view>
					<view class="price_vip">
						<image class="ico" src="/static/img/ico_v.png" mode="widthFix"></image>
					</view>
					<view class="info">
						<view class="item">
							{{$t('合计报价')}}:<text class="red font-bold">{{ item.price_unit || '' }}{{ item.price || '' }}</text>
						</view>
						<view class="item">
							{{$t('过程时效')}}:<text class="font-bold">{{ item.validity || '' }}{{$t('天')}}</text>
						</view>
						<view class="item">
							{{$t('有效期至')}}:<text class="font-bold">{{ item.quotation_end_at || '' }}</text>
						</view>
					</view>


				</view>
				<view class="btns">
					<view class="btn" @click="toQuoDetail(item)">
						{{$t('详情')}}
					</view>
					<view v-if="!current.includes(index)" class="btn" @click="hideItem(item)">
						{{$t('忽略')}}
					</view>
					<view v-if="current.includes(index)" @click="deleCooperate(index)" class="btn yellow">
						{{$t('已合作')}}
					</view>
					<view v-else class="btn" @click="goCooperate(index, item)">
						{{$t('合作')}}
					</view>
				</view>
			</view>
		</view>
		<div v-if="nomore" class="center text-gray-500 fz24 mt-20 pb-150">{{$t('没有更多了')}}</div>
		<view class="footer_btn2">
			<!-- <view class="btn1" @click="changeDemand">
				{{$t('修改需求')}}
			</view> -->
			<view class="btn" @click="sendProduct">
				{{$t('确认发货')}}
			</view>
		</view>



	</view>
</template>

<script>
import FreightVehicles from './components/freightVehicles.vue'
import BusiRequire from './components/busiRequire.vue'
import { getQuotationList, sendDelivery } from '@/api/order.js'
import route from "./components/route.vue"
export default {
	components: {
		FreightVehicles,
		BusiRequire,
		route
	},
	onLoad(options) {
		this.allInfo = JSON.parse(options.item)
		this.delivery_id = this.allInfo.id
	},
	data() {
		return {
			priceIndex: 0,
			current: [],
			// 排序状态: 0-默认 1-升序 2-降序
			comprehensiveSort: 0,
			priceSort: 0,
			timeSort: 0,
			delivery_id: '',
			allPriceList: [],
			allInfo: {},
			transportList: [
				{
					key: '0',
					value: this.$t('不限')
				},
				{
					key: '1',
					value: '其他 '
				},
				{
					key: '2',
					value: this.$t('汽运')
				},
				{
					key: '3',
					value: this.$t('空运')
				},
				{
					key: '4',
					value: this.$t('海运')
				},
				{
					key: '5',
					value: this.$t('铁路')
				},
			],
			demandList: {
				1: this.$t('运输'),
				2: this.$t('报关'),
				3: this.$t('转关'),
				4: this.$t('清关'),
			},
			businessList: [],
			carList: [],
			comprehensive: '',
			pricekey: '',
			validity: '',
			currentValue: '',
			IMAGE_URL: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com/',
			params: {
				delivery_id: '',
				page: 1,
				limit: 10,
				user_id: uni.getStorageSync("user_id"),
				price_order: '0',
				validity_order: '0',
				synthesis_order: '0',
				is_transport: '0'
			},
			nomore: false
		}
	},
	mounted() {
		this.getPriceList()
	},
	methods: {
		getImageUrl(url = '') {
			console.log(url)
			if(url.indexOf('://') > -1) {
				return url
			} else {
				return this.IMAGE_URL + url
			}
		},
		setParamsInit() {
			this.params = {
				delivery_id: this.delivery_id, // this.delivery_id
				page: 1,
				limit: 10,
				user_id: uni.getStorageSync("user_id"),
				price_order: '0',
				validity_order: '0',
				synthesis_order: '0',
				is_transport: '0'
			}
		},
		hideItem(hideitem) {
			this.allPriceList = this.allPriceList.filter(item => item.id !== hideitem.id)
		},
		goDemand() {
			uni.navigateTo({
				url: `/pages/shipmentRecord/sourceDeatil?item=${JSON.stringify(this.allInfo)}`
			})
		},
		//下拉刷新
		onPullDownRefresh() {
			this.isUpComprehensive = false
			this.isDownComprehensive = false
			this.isUpPricekey = false
			this.isDownPricekey = false
			this.isUpValidity = false
			this.isDownValidity = false
			this.setParamsInit()
			this.getPriceList(true)
		},
		//上拉加载
		onReachBottom() {
			this.params.page++
			this.getPriceList()
		},
		goCooperate(index, item) {
			// this.slog('id------', item.id)
			if (this.current.length > 0) {
				this.current = []
				this.current.push(index)
				this.currentValue = item.id
			} else {
				this.current.push(index)
				this.currentValue = item.id
			}
		},
		deleCooperate(index) {
			console.log(index)
			this.current.splice(index, 1)
		},
		getPriceList(init) {
			if (init) {
				this.params.page = 1
				this.nomore = false;
			}
			this.params.delivery_id = this.delivery_id
			getQuotationList(this.params).then(res => {
				if (this.params.page == 1) {
					this.allPriceList = res.data.data.data || []
				} else {
					this.allPriceList = [...this.allPriceList, ...res.data.data.data]
				}
				//当前请求的列表是空的 那就是没有更多了
				if (res.data.data.data.length == 0) {
					this.nomore = true;
				}
				// 结束下拉刷新
				uni.stopPullDownRefresh()
			})
		},
		clickPriceTab(index) {
			this.priceIndex = index;
			// 重置所有排序状态
			this.comprehensiveSort = 0;
			this.priceSort = 0;
			this.timeSort = 0;
			// 重置排序参数
			this.params.synthesis_order = "0";
			this.params.price_order = "0";
			this.params.validity_order = "0";
			this.getPriceList(true);
		},
		clickPriceioTab(index){
			this.priceIndex = index;
			this.priceSort++;
			if (this.priceSort > 2) {
				this.priceSort = 0;
			}
			this.params.synthesis_order = "0";
			this.params.validity_order = "0";
			this.params.price_order = this.priceSort;
			this.getPriceList(true);
		},
		clickPriceioTabTime(index){
			this.priceIndex = index;
			this.timeSort++;
			if (this.timeSort > 2) {
				this.timeSort = 0;
			}
			this.params.synthesis_order = "0";
			this.params.price_order = "0";
			this.params.validity_order = this.timeSort;
			this.getPriceList(true);
		},
		
		upFillAll(type) {
			if (this.priceIndex !== 0) return;
			this.comprehensiveSort = type === '1' ? 1 : 2;
			this.params.synthesis_order = type;
			this.getPriceList(true);
		},
		upFillPrice(type) {
			if (this.priceIndex !== 1) return;
			this.priceSort = type === '1' ? 1 : 2;
			this.params.price_order = type;
			this.getPriceList(true);
		},
		upFillTime(type) {
			if (this.priceIndex !== 2) return;
			this.timeSort = type === '1' ? 1 : 2;
			this.params.validity_order = type;
			this.getPriceList(true);
		},

		sendProduct() {
			console.log('=======', this.delivery_id, this.currentValue)
			if (this.currentValue) {
				sendDelivery({
					// is_transport 0：货代  1：运输
					is_transport: '0',
					quota_id: this.currentValue,
					user_id: uni.getStorageSync("user_id"),
					delivery_id: this.delivery_id
				}).then(res => {
					if (res.data.code == 200) {
						// uni.$u.toast('合作成功')
						uni.redirectTo({
							url: "/pages/shipmentRecord/result"
						})
						// setTimeout(() => {
						// 	uni.navigateTo({
						// 		url:'/pages/shipmentRecord/index'
						// 	})
						// }, 500)
					} else {
						uni.$u.toast(res.data.message)
					}
				})
			} else {
				uni.$u.toast(this.$t('请选择合作对象'))
			}
		},
		changeDemand() {
			uni.$u.toast('敬请期待')
		},
		back() {
			// uni.navigateBack()
			this.cback()
		},
		toQuoDetail(params) {
			uni.navigateTo({
				url: `/pages/shipmentRecord/quotationInfo?item=${JSON.stringify({ orderInfo: this.allInfo, quoInfo: params, is_transport: '0' })}`
			})
		}
	}
}
</script>

<style lang="scss">
page {
	background: #F6F7FB;
}

.topSty {
	border-radius: 0 0 40rpx 40rpx;
	background: #F6F7FB url("/static/bg/backcolorImg.png") no-repeat top / 100%;
	// padding-top: 20rpx;
}

.header {
	font-size: 34rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-weight: bold;
	text-align: center;
	position: relative;
	padding-top: var(--status-bar-height);
}

.back {
	position: absolute;
	width: 70rpx;
	height: 70rpx;
	top: 15rpx;
}

.price_list {
	margin: 20rpx 24rpx 0;
	position: relative;
	border-radius: 26rpx;
	background: #FFF;
	box-shadow: 2rpx 4rpx 13.9rpx 0rpx rgba(0, 0, 0, 0.05);

	&.hover {
		border-radius: 30rpx;
		border: 2rpx solid #FFC936;
		background: linear-gradient(189deg, #FFD572 -12.4%, #FFF2D9 6.59%, #FFF 25.33%, #FFF 56.91%);

		.price_vip {
			display: flex;
		}
	}

	.price_vip {
		display: none;
		position: absolute;
		top: 0;
		right: 0;
		width: 96rpx;
		height: 40rpx;
		flex-shrink: 0;
		border-radius: 0px 26rpx;
		background: #FB0;
		align-items: center;
		justify-content: center;

		.ico {
			width: 44rpx;
			height: 44rpx;
		}
	}

	.info {
		padding: 20rpx 0;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;

		.item {
			width: 50%;
			color: #535353;
			font-size: 26rpx;
			line-height: 28rpx;
			padding: 20rpx 24rpx;

			text {
				padding-left: 16rpx;
				color: #1D1D1D;
				font-size: 28rpx;
				line-height: 28rpx;

				&.red {
					color: #F53F3F;
				}
			}
		}
	}

	.btns {
		border-top: 1rpx solid #F0F0F0;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.btn {
			width: 100%;
			text-align: center;
			line-height: 90rpx;
			color: #8C8C8C;
			font-size: 26rpx;
			border-left: 1rpx solid #F0F0F0;

			&:first-child {
				border: none;
			}

			&.yellow {
				color: #EFB200;
			}
		}
	}

	.title {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		height: 90rpx;
		border-bottom: 1rpx solid #F0F0F0;
		margin: 0 24rpx;

		.ico {
			flex-shrink: 0;
			width: 40rpx;
			border-radius: 10rpx;
			margin-right: 15rpx;

		}

		.name {
			color: #1D1D1D;
			font-size: 28rpx;
			font-weight: 600;
			line-height: 28rpx;
		}
	}
}

.price_tab {
	padding: 0 30rpx;
	display: flex;
	align-items: center;
	justify-content: flex-start;

	.item {
		display: flex;
		align-items: center;
		width: 30%;
		padding: 20rpx 0;

		&.hover {
			.name {
				color: #278AFF;
				font-weight: 600;
			}
		}

		.name {
			color: #535353;
			font-size: 26rpx;
			font-weight: 600;
			line-height: 26rpx;
			padding-right: 6rpx;
		}
	}

	.arrow {
		// .bridght {
		// 	/deep/ .uicon-arrow-up-fill {
		// 		span {
		// 			color: '#278AFF' !important;
		// 		}

		// 	}
		// }
		// .dark {
		// 	/deep/ .uicon-arrow-up-fill {
		// 		span {
		// 			color: '#C8C8C8' !important;
		// 		}

		// 	}
		// }
	}

	// .bridght {
	// 	/deep/ .u-icon__icon {
	// 		color: '#278AFF' !important;
	// 	}
	// }
}

.contentSty {
	// padding-bottom: 150rpx;
}

.city {
	padding: 50rpx 60rpx;
	display: flex;
	// align-items: center;
	justify-content: space-evenly;
	// background: #fff;
	border-radius: 0 0 40rpx 40rpx;
	box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.05);

	.line {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: -24rpx;

		.text {
			color: #278AFF;
			font-size: 26rpx;
			font-weight: 500;
			line-height: 28rpx;
		}

		.ico {
			width: 50%;
		}
	}

	.citySty {
		color: #535353;
		font-family: "PingFang SC";
		font-size: 22rpx;
		font-style: normal;
		font-weight: 400;
		margin-top: 16rpx;
	}

	.city_item {
		flex-shrink: 0;
		display: flex;
		align-items: center;

		.ico {
			flex-shrink: 0;
			width: 50rpx;
			flex-shrink: 0;
			margin-right: 10rpx;
		}

		.name {
			font-size: 28rpx;
			font-weight: 600;
			line-height: 40rpx;
		}
	}
}

.wlxx {
	background: #fff;
	border-radius: 30rpx;
	margin: 25rpx;
	padding: 0 30rpx 20rpx;

	.item_btn {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 1px solid #eee;
		padding-top: 20rpx;
		margin-top: 15rpx;

		.btn_blue_big {
			margin-left: auto;
			width: 320rpx;
			height: 70rpx;
			flex-shrink: 0;
			text-align: center;
			line-height: 70rpx;
			color: #fff;
			font-size: 28rpx;
			background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
			border-radius: 40rpx;
		}

		.btn {
			display: flex;
			align-items: center;
			margin-right: 20rpx;

			.ico {
				flex-shrink: 0;
				width: 28rpx;
				height: 28rpx;
				margin-right: 6rpx;
			}

			text {
				display: block;
				color: #8C8C8C;
				font-size: 22rpx;
				line-height: 24rpx;
			}
		}
	}

	.item_title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
		border-bottom: 1px solid #eee;
		margin-bottom: 15rpx;
	}

	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0;
	}

	.name {
		flex-shrink: 0;
		color: #535353;
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.info {
		color: #333;
		font-size: 28rpx;
		line-height: 40rpx;
		font-weight: 600;

		.ico {
			width: 44rpx;
			height: 44rpx;
			margin-left: 12rpx;
		}

		&.red {
			color: #F53F3F;
			font-weight: 600;
		}
	}
}

.footer_btn2 {
	width: 100%;
	height: 128rpx;
	background: #FFF;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	position: fixed;
	bottom: 0;

	.btn1 {
		width: 334rpx;
		height: 94rpx;
		flex-shrink: 0;
		border-radius: 500rpx;
		border-radius: 500px;
		border: 1px solid #8C8C8C;
		line-height: 94rpx;
		text-align: center;
		color: #8C8C8C;
		font-family: "PingFang SC";
		font-size: 32rpx;
		font-style: normal;
		font-weight: 400;
	}

	.btn {
		width: 96%;
		height: 94rpx;
		flex-shrink: 0;
		border-radius: 500rpx;
		border: 2rpx solid rgba(3, 189, 130, 0.10);
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
		line-height: 94rpx;
		text-align: center;
		color: #FFF;
		font-family: "PingFang SC";
		font-size: 32rpx;
		font-style: normal;
		font-weight: 600;
	}
}
</style>
